<template>
    <div class="main_box">
        <van-row class="main_item">
            <van-col class="main_logo margin_center">
                logo
            </van-col>
        </van-row>
        <van-row class="main_item">
            <van-button
                    @click="selLevelFlag = true"
                    class="margin_center"
                    type="default"
                    v-if="continueBtnFlag"
                    round>
                <template #default>
                    难度：{{ selLevelTitle }}
                </template>
            </van-button>
            <van-overlay :show="selLevelFlag" @click="selLevelFlag = false">
                <div class="sel_overlay_box wrapper">
                    <div v-show="selLevelFlag" class="sel_overlay_box_item"
                         v-for="it in [{text:'简单', val:0}, {text:'普通', val:1}, {text:'大师',val:2}]"
                         @click="selLevelFun(it)">
                        {{ it.text }}
                    </div>
                    <br/>
                </div>
            </van-overlay>

        </van-row>
        <van-row class="main_item">
            <van-button
                    class="margin_center"
                    type="default"
                    v-if="continueBtnFlag"
                    @click="comeGame(0)"
                    round>
                继续游戏
            </van-button>
        </van-row>
        <van-row>
            <van-button round
                        @click="comeGame(1)"
                        class="margin_center">
                开始游戏
            </van-button>
        </van-row>
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {simpleArr, commonArr, difficalArr} from '../contant/arr';

const continueBtnFlag = ref(true);
const selLevelFlag = ref(false);
const selLevelTitle = ref('简单');
let selLevel = 0;// 默认简单
const router = useRouter();
const questionIndArr = [];

const selLevelFun = (it) => {
    selLevelTitle.value = it.text;
    // 记录选中难度
    selLevel = it.val;
}
const comeGame = (val) => {
    // gameFlag 表示 开始游戏（1） 或 继续（0）
    router.push("/game?gameFlag=" + val)
}
// 这里要优化， 数据放在这里最好，但是传递给子组件有点麻烦，最好的方法是 用vuex
// 但是不知道兼不兼容，所以没用
// todo 数据传到table表里
onMounted(() => {
// 随机选三个 题目下标
    questionIndArr.push(Math.random() % simpleArr.length);
    questionIndArr.push(Math.random() % commonArr.length);
    questionIndArr.push(Math.random() % difficalArr.length);
})
</script>

<style scoped>
.main_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main_item {
    height: 30%;
    margin: 20px;
}

.main_logo {
    text-align: center;
}

.wrapper {
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 30%;
    margin: 0 auto;
    margin-top: 30%;
}

.sel_overlay_box_item {
    background-color: white;
    display: block;
    text-align: center;
}

</style>
